<template>
  <slot name="EchartsTitle"></slot>
  <div>123</div>
  <slot :data="data.list"></slot>
  <div class="box" ref="box"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
const { proxy } = getCurrentInstance();
const box = ref<HTMLElement>();
const data = reactive({
  list: ["s", "a", "n", "s"],
});
onMounted(() => {
  drawChart();
});

// 画一个echarts
const drawChart = () => {
  // 初始化一个echarts对象
  let myChart = proxy.$echarts.init(document.querySelector(".box"), null, {
    width: 500,
    height: 400,
  });
  // echarts配置
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // x轴
    xAxis: [
      {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    // y轴
    yAxis: [
      {
        type: "value",
      },
    ],
    // 类型数据
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data: [10, 52, 200, 334, 390, 330, 220],
      },
    ],
  };
  // 将数据放入echarts对象里
  myChart.setOption(option);
};
</script>
<style lang="less" scoped>
.box {
  width: 500px;
  height: 400px;
  background-color: pink;
}
</style>